<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加商品</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="${request.contextPath}/admin_res/layui-admin/frame/layui/css/layui.css">
</head>
<body>
          
<form class="layui-form" action="return false;">

	<div class="layui-row">
	    <div class="layui-col-xs6">
	    
			  <div class="layui-form-item">
			    <label class="layui-form-label">商品名称</label>
			    <div class="layui-input-block">
			      <input name="title" lay-verify="required" autocomplete="off" placeholder="请输入商品名称" class="layui-input" type="text">
			    </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">价格（元）</label>
			      <div class="layui-input-block">
			        <input name="price" lay-verify="required|number" autocomplete="off" class="layui-input" type="number">
			      </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">原格（元）</label>
			      <div class="layui-input-block">
			        <input name="oldPrice" lay-verify="required|number" autocomplete="off" class="layui-input" type="number">
			      </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">库存</label>
			      <div class="layui-input-block">
			        <input name="num" lay-verify="required|number" autocomplete="off" class="layui-input" type="number">
			      </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">重量</label>
			      <div class="layui-input-block">
			        <input name="weight" lay-verify="number" autocomplete="off" class="layui-input" type="number">
			      </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">商品图片</label>
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="btn_upload_image">上传</button>
				  <div class="layui-upload-list"  style="text-align: center;">
				    <img class="layui-upload-img" id="item_image_preview" alt="">
				    <p id="uploadTextImage"></p>
				    <input type="hidden" name="image" id="image">
				  </div>
				</div>
			  </div>
	    
	    </div>
	    
	    
	    
	    <div class="layui-col-xs6">

			  <div class="layui-form-item">
			      <label class="layui-form-label">所属分类</label>
			      <div class="layui-input-block">
			        <input id="query_category" lay-verify="required" autocomplete="off" class="layui-input"  hidden_value="cid">
			        <input type="hidden" id="cid" name="cid">
			      </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">颜色</label>
			      <div class="layui-input-block">
			        <input name="colour" autocomplete="off" class="layui-input" type="text">
			      </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">尺寸/规格</label>
			      <div class="layui-input-block">
			        <input name="size" autocomplete="off" class="layui-input" type="text">
			      </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">状态</label>
			    <div class="layui-input-block">
			      <input checked="" name="status" lay-skin="switch" lay-text="ON|OFF" type="checkbox">
			    </div>
			  </div>
			  <div class="layui-form-item">
			      <label class="layui-form-label">排序</label>
			      <div class="layui-input-block">
			        <input name="sortOrder" lay-verify="required|number" autocomplete="off" class="layui-input" type="number">
			      </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">商品条形码</label>
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="btn_upload_barcode">上传</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="item_barcode_preview" alt="">
				    <p id="uploadTextBarcode"></p>
				    <input type="hidden" name="barcode" id="barcode">
				  </div>
				</div>   
			  </div>
	    
	    </div>
	    
	    <div class="layui-col-xs12">
	    	<div class="layui-form-item">
			      <label class="layui-form-label">商品描述</label>
			      <div class="layui-input-block">
			        <textarea name="detail" lay-verify="required" autocomplete="off" maxlength="300" class="layui-textarea" placeholder="最多300字"></textarea>
			      </div>
			  </div>
	    </div>
	    
	    <div class="layui-col-xs6">
			  <div class="layui-form-item layui-col-xs6">
			    <label class="layui-form-label">商品预览</label>
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="btn_upload_images">上传</button>
				  <div class="layui-upload-list">
				    <div id="item_images_preview"></div>
				    <p id="uploadTextImages"></p>
				    <input type="hidden" name="previewImage" id="images">
				  </div>
				</div>   
			  </div>
	    </div>
	    <div class="layui-col-xs6">
			  <div class="layui-form-item layui-col-xs6">
			    <label class="layui-form-label">商品图解</label>
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="btn_upload_detail_image">上传</button>
				  <div class="layui-upload-list">
				    <div id="item_detail_image_preview"></div>
				    <p id="uploadTextDetailImage"></p>
				    <input type="hidden" name="detailImage" id="detailImage">
				  </div>
				</div>   
			  </div>
	    </div>
	    
	    
	  </div>

  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script type="text/javascript" src="${request.contextPath}/admin_res/layui-admin/frame/layui/layui.js"></script>
<script type="text/javascript" src="${request.contextPath}/admin_res/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${request.contextPath}/admin_res/bootstrap.autocomplete.js"></script>
<script>
var nginxImage = "${nginxImage}" ;
layui.use(['form', 'layedit' , 'upload'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,upload = layui.upload
  ,layedit = layui.layedit ;
  
  query_category_autocomplete();
  
  //监听提交
  form.on('submit(demo1)', function(data){
	if(data.field.status=='on'){
		data.field.status=1 ;
	}else{
		data.field.status=0 ;
	}
    $.post("${request.contextPath}/admin/item/insertByEntity" , data.field , function(ret){
    	if(ret.status==200){
			  var index = parent.layer.getFrameIndex(window.name);
			  parent.layer.close(index);
			  parent.layer.msg("添加成功");
    	}else{
    		layer.msg(ret.msg);
    	}
    });
    return false;
  });
  
  //商品二维码上传
  initUpload(upload , "btn_upload_image" , "item_image_preview" , "item_image" , "image" , "uploadTextImage");
  //商品图片上传
  initUpload(upload , "btn_upload_barcode" , "item_barcode_preview" , "item_barcode" , "barcode" , "uploadTextBarcode");
  //商品图解上传
  initUpload(upload , "btn_upload_detail_image" , "item_detail_image_preview" , "item_image_detail" , "detailImage" , "uploadTextDetailImage" , true);
  //商品预览上传
  initUpload(upload , "btn_upload_images" , "item_images_preview" , "item_image_detail" , "images" , "uploadTextImages" , true);
  
});

//初始化上传
function initUpload(upload , btn , preview , module , input , reload_btn , multiple){
	//普通图片上传
	  var uploadInst = upload.render({
	    elem: '#' + btn
	    ,url: '${request.contextPath}/admin/upload'
	    ,accept: 'file' //普通文件
	    ,exts: 'jpg|png|gif'
	    ,data :{
	    	module: module
	    }
	    ,done: function(res){
	      if(res.status!=200){
		      //如果上传失败
	        return layer.msg('上传失败');
	      }else{
	    	  if(multiple){
	    		  //如果多文件上传
	    		  var val = $("#" + input).val();
	    		  $("#" + input).val(res.data + "," + val);
	    		  $("#"+preview).append('<img style="width:100%;" class="layui-upload-img" src="' + nginxImage + res.data + '" onclick="removeImage(\'' + input + '\' , \'' + res.data + '\' , this)">');
	    	  }else{
			      //上传成功
			      $("#" + input).val(res.data);
			      $('#' + preview).attr('src', nginxImage + res.data);
	    	  }
	      }
	    }
	    ,error: function(){
	      //演示失败状态，并实现重传
	      var demoText = $('#' + reload_btn);
	      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	      demoText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
}

function removeImage(id , img , _this){
	layer.confirm('确认删除吗？', {
        btn : [ '确定', '取消' ]
    }, function(index) {
        layer.close(index);
		var val = $("#"+id).val();
		val = val.replace(img,'');
		$("#"+id).val(val);
		$(_this).remove();
    }); 
}

function query_category_autocomplete(){
	$("#query_category").autocomplete({
		items : 20 ,
        source:function(query,process){
        	$.post("${request.contextPath}/admin/category/getCategoryList" , {
        		categoryName : $("#query_category").val()
        	} , function(ret){
        		return process(ret.data);
        	})
        },
        formatItem:function(item){
        		return item["categoryName"] + "("+item["categoryLevel"]+")";
        },
        setValue:function(item){
        		return {'data-value':item["categoryName"],'real-value':item["id"]};
        }
    });
}
</script>
</body>
</html>